<template>
  <div class="dashboard-editor-container chart-wrapper">
    <div class="wenzi">
      财务数据
      <div class="benyue">
        <span>本月订单总数:320</span>
        <span>本月订单总额:￥63000</span>
      </div>
      <div class="dianji">
        <span :class="benzhou" @click="handler">本周</span>
        <span>|</span>
        <span :class="benyue" @click="handle">本月</span>
      </div>
    </div>
    <div :class="className" :style="{ height: height, width: width }" ></div>
  </div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

const animationDuration = 6000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
      benzhou: "active",
      benyue: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    handler() {
      this.benzhou = "active";
      this.benyue = "";
    },
    handle() {
      this.benyue = "active";
      this.benzhou = "";
    },

    initChart() {
      this.chart = echarts.init(this.$el.querySelector(".chart"), "macarons");

      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: 10,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "01-01",
              "01-02",
              "01-03",
              "01-04",
              "01-05",
              "01-06",
              "01-07",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "pageA",
            type: "bar",
            stack: "vistors",
            barWidth: "20%",

            data: [1179, 1152, 1200, 1334, 1390, 1330, 1220],
            animationDuration,
            itemStyle: {
              //通常情况下：
              normal: {
                barBorderRadius: 4,
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  var colorList = [
                    ["rgb(85, 255, 127)", "rgb(255, 255, 0)"],
                    ["#F5cF0D", "#fa9203"],
                    ["#61dbe8", "#0785de"],
                    ["#ff9717", "#ffffff"],
                  ];
                  var index = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorList[index][0],
                    },
                    {
                      offset: 0.5,
                      color: "#e8e8e8",
                    },
                    {
                      offset: 1,
                      color: "#ffffff",
                    },
                  ]);
                },
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss"  scoped>
.chart-wrapper {
  background: rgb(255, 255, 255);
  padding: 15px 15px 0;
  margin-bottom: 32px;
  // height: 300px;
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 4px;
  }
}
.dashboard-editor-container {
  padding: 30px 0;
  // background-color: rgb(240, 242, 245);
  // height: 100%;
  // position: relative;
  
}
.wenzi {
    height: 50px;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    padding: 0 10px 0 30px;
    position: relative;
  &::before {
        content: '';
        position: absolute;
        width: 4px;
        height: 20px;
        background: #3e8dca;
        left: 15px;
        top: 15px;
        border-radius: 2px;
      }
    .dianji {
      .active {
        color: rgb(0, 119, 255);
      }
    }
    span {
      margin-right: 5px;
    }
    .benyue {
      span {
        margin-right: 15px;
      }
    }
  }
</style>